import React, { Component } from 'react';
import axios from 'axios';
import { NavLink } from 'react-router-dom';
import $ from  'jquery'
import './Player.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      pop : this.props.match.params.id,
      songlist: [],
      song : '',
      songer : '',
      songUrl : '',
      songLrc : ``,
      songTime : '',
      songImg : ''
    }
  }
  
  checkBoxAllChange = (e) => {
    if (e.target.checked === true) {
      console.log(1);
      $(e.target).css({'background':'rgba(255,255,255,0.7)','border':'1px solid rgba(255,255,255,0.8)'})
    } else {
      $(e.target).css({'background':0,'border':'1px solid rgba(255,255,255,0.3)'})
    }
  }

  checkBoxChange = (e) => {
    if (e.target.checked === true) {
      console.log(1);
      $(e.target).css({'background':'rgba(255,255,255,0.7)','border':'1px solid rgba(255,255,255,0.8)'})
    } else {
      $(e.target).css({'background':0,'border':'1px solid rgba(255,255,255,0.3)'})
    }
  }

  componentDidMount () {
    console.log(this.props.match.params.id)
    axios.get('https://api.bzqll.com/music/netease/songList?key=579621905&id='+this.state.pop+'&limit=10&offset=0')
    .then(data => {
      console.log(data)
      $('.player-shadow').css({
        'background':`url(${data.data.data.songs[0].pic})`,
        'background-size': 'cover'
      })
      axios.get(data.data.data.songs[0].lrc)
      .then(data => {
        console.log(data)
        $('.con-v-right p').prepend(data.data)
        this.setState({
          songLrc : data.data
        })
      })
      // var second = Number;
      // if (data.data.data.songs[0].time%60 < 10) {
      //   second = '0'+data.data.data.songs[0].time%60
      // } else {
      //   second = data.data.data.songs[0].time%60
      // }
      // var Time = parseInt(data.data.data.songs[0].time/60)+':'+second
      this.setState({
        songlist : data.data.data.songs,
        songImg : data.data.data.songs[0].pic,
        // songTime : data.data.data.songs[0].time,
        songUrl : data.data.data.songs[0].url
      })
      // this.setState({
      //   song : data.data.data.name,
      //   songer : data.data.data.singer,
      //   songUrl : data.data.data.url,
      //   songTime : Time,
      //   songImg : data.data.data.pic
      // })
    })
  }

  render () {
    return (
      <div className="player">
        <div className="player-content">
          <NavLink to="/musichall/index" className="logo">余 音</NavLink>
          <div className="con-vessel">
            <div className="con-v-left">
              <ul className="left-operate">
                <li className="iconfont icon-like"> 收藏</li>
                <li className="iconfont icon-roundadd"> 添加到</li>
                <li className="iconfont icon-down_light"> 下载</li>
                <li className="iconfont icon-delete_light"> 删除</li>
                <li className="iconfont icon-edit"> 清空列表</li>
              </ul>
              <h2>
                <input type="checkbox" onClick={(e)=>{this.checkBoxAllChange(e)}} />
                <p>歌曲</p>
                <span>歌手</span>
                <b>时长</b>
              </h2>
              <ul className="left-songList">
                {
                  this.state.songlist.map((item, index) => {
                  return (
                    <li key={ item.id }>
                        <input type="checkbox" onClick={(e)=>{this.checkBoxChange(e)}} />
                        <p>{ index+1 } { item.name }</p>
                        <span>{ item.singer }</span>
                        <b>{ item.time }</b>
                    </li>
                  )
                  })
                }
                {/* <li>
                  <input type="checkbox" onClick={(e)=>{this.checkBoxChange(e)}} />
                  <p>1 { this.state.song }</p>
                  <span>{ this.state.songer }</span>
                  <b>{ this.state.songTime }</b>
                </li> */}
              </ul>
            </div>
            <div className="con-v-right">
              <img src={ this.state.songImg } alt=""/>
              <p>
              </p>
            </div>
            <div className="con-v-bottom">
              <audio src={ this.state.songUrl } controls autoplay="true">
                您的浏览器不支持 audio 标签。
              </audio>
            </div>
          </div>
        </div>
        <div className="player-shadow"></div>
      </div>
    )
  }
}

export default Com;
